<template>
    <input type="text" v-model='addInput'><button @click="addThing(addInput)">添加</button>
    <ul v-for="item in buttonChose" :key="toDoList.id">
        <li :class="{active:(item.state)}" @click="finishIt(item)">{{ item.list }}</li>
    </ul>
    <p>统计:{{ finishedThings.length }}/{{ toDoList.length }}</p>
    <div>
        <button v-for="item in onState" :key="item.id" :disabled="choseState==item.id" @click="choseState=item.id">
            {{ item.value }}
        </button>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const toDoList = ref([
    { id: 1, list: '学习HTML', state: 0 },
    { id: 2, list: '学习CSS', state: 1 },
    { id: 3, list: '学习JS', state: 0 },
])
const isChoseBtn = ref(true);
const isChoseBtn1 = ref(false);
//添加的事件
const addInput = ref([]);
const choseState = ref('1');
const onState =[
    {id:1,value:'全部'},
    {id:2,value:'已完成'},
    {id:3,value:'未完成'}
]
const buttonChose = computed(()=>{
    if(choseState.value==2){return toDoList.value.filter(item=> item.state)}
    if(choseState.value==3){return toDoList.value.filter(item=> !item.state)}
    return toDoList.value
})
//已完成事件数组
const finishedThings = computed(() => {
    return toDoList.value.filter(item => {
        return item.state == 1;
    });
})
function all() {
    buttonChose.value = toDoList.value;
    
}
function finished() {
    buttonChose.value = toDoList.value.filter(item => item.state == 1);
}
function toDo() {
    buttonChose.value = toDoList.value.filter(item => item.state == 0);
}

function addThing(data) {
    toDoList.value.push({ id: (toDoList.value.length), list: data, state: 0 });
}
function finishIt(data) {
    if (data.state) {
        data.state = 0;
    } else {
        data.state = 1;
    }
}
</script>

<style scoped>
.active {
    color: red;
    text-decoration: line-through;
}
</style>